import { useMemo } from 'react';
import { Menu } from 'antd';
import Icon from '@app/components/Icon';
import { Link } from 'react-router-dom';
import Avatar from '@app/components/Avatar';
import { useI18n } from '@vesoft-inc/i18n';
import { INTL_LOCALE_SELECT } from '@app/config';
import { observer } from 'mobx-react-lite';
import { useStore } from '@app/stores';
import styles from './index.module.less';

const HelpMenu = () => {
  const { currentLocale, updateI18n, intl } = useI18n();
  const {
    global: { username, logout },
  } = useStore();
  const items = useMemo(
    () => [
      // {
      //   key: 'star',
      //   label: (
      //     <a
      //       className={styles.nebulaLink}
      //       href="https://github.com/vesoft-inc/nebula"
      //       target="_blank"
      //       data-track-category="navigation"
      //       data-track-action="star_nebula"
      //       data-track-label="from_navigation"
      //       rel="noreferrer"
      //     >
      //       <Icon className={styles.navIcon} type="icon-studio-nav-github" />
      //     </a>
      //   ),
      // },
      {
        key: 'language',
        label: <Icon className={styles.navIcon} type="icon-studio-nav-language" />,
        popupClassName: styles.langMenu,
        popupOffset: [-66, 20],
        children: Object.keys(INTL_LOCALE_SELECT).map((locale) => ({
          key: `language-${locale}`,
          onClick: () => updateI18n(INTL_LOCALE_SELECT[locale].NAME),
          label: INTL_LOCALE_SELECT[locale].TEXT,
        })),
      },
      {
        key: 'welcome',
        label: (
          <Link className={styles.nebulaLink} to="/welcome">
            <Icon className={styles.navIcon} type="icon-studio-nav-help" />
          </Link>
        ),
      },
      // {
      //   key: 'feedbackEntrance',
      //   popupClassName: styles.accountMenu,
      //   popupOffset: [0, 20],
      //   label: <Icon className={styles.navIcon} type="icon-navbar-feedback" />,
      //   children: [
      //     {
      //       key: 'feedback',
      //       label: (
      //         <a
      //           className={styles.nebulaLink}
      //           href={intl.get('link.feedback')}
      //           target="_blank"
      //           rel="noreferrer"
      //           data-track-category="navigation"
      //           data-track-action="feedback"
      //           data-track-label="from_navigation"
      //         >
      //           <Icon className={styles.menuIcon} type="icon-navbar-troubleFeedback" />
      //           {intl.get('menu.feedback')}
      //         </a>
      //       ),
      //     },
      //     {
      //       key: 'repo',
      //       label: (
      //         <a
      //           className={styles.nebulaLink}
      //           href="https://github.com/vesoft-inc/nebula-studio"
      //           target="_blank"
      //           rel="noreferrer"
      //           data-track-category="navigation"
      //           data-track-action="repo"
      //           data-track-label="from_navigation"
      //         >
      //           <Icon className={styles.menuIcon} type="icon-studio-nav-github" />
      //           {intl.get('menu.repo')}
      //         </a>
      //       ),
      //     },
      //     {
      //       key: 'trial',
      //       label: (
      //         <a
      //           className={styles.nebulaLink}
      //           href={intl.get('link.trial')}
      //           target="_blank"
      //           rel="noreferrer"
      //           data-track-category="navigation"
      //           data-track-action="trial"
      //           data-track-label="from_navigation"
      //         >
      //           <Icon className={styles.menuIcon} type="icon-navbar-enterprise" />
      //           {intl.get('menu.trial')}
      //         </a>
      //       ),
      //     },
      //     {
      //       key: 'contact',
      //       label: (
      //         <a
      //           className={styles.nebulaLink}
      //           href={intl.get('link.contact')}
      //           target="_blank"
      //           rel="noreferrer"
      //           data-track-category="navigation"
      //           data-track-action="contact"
      //           data-track-label="from_navigation"
      //         >
      //           <Icon className={styles.menuIcon} type="icon-navbar-contactUs" />
      //           {intl.get('menu.contact')}
      //         </a>
      //       ),
      //     },
      //   ],
      // },
      {
        key: 'setting',
        label: (
          <Link className={styles.nebulaLink} to="/setting">
            <Icon className={styles.navIcon} style={{ fontSize: 20 }} type="icon-navbar-setting" />
          </Link>
        ),
      },
      {
        key: 'user',
        popupClassName: styles.accountMenu,
        popupOffset: [0, 20],
        label: (
          <div>
            <Avatar size="small" username={username} />
          </div>
        ),
        children: [
          // {
          //   key: 'version-log',
          //   label: (
          //     <a
          //       className={styles.nebulaLink}
          //       data-track-category="navigation"
          //       data-track-action="view_changelog"
          //       href={intl.get('link.versionLogHref')}
          //       target="_blank"
          //       rel="noreferrer"
          //     >
          //       <Icon className={styles.menuIcon} type="icon-studio-nav-version" />
          //       {intl.get('menu.release')}
          //     </a>
          //   ),
          // },
          {
            key: 'user-logout',
            label: (
              <span className={styles.nebulaLink} onClick={logout}>
                <Icon className={styles.menuIcon} type="icon-studio-nav-clear" />
                {intl.get('configServer.clear')}
              </span>
            ),
          },
          // {
          //   key: 'version',
          //   label: `v${version}`,
          // },
        ],
      },
    ],
    [currentLocale],
  );
  return <Menu className={styles.helpMenu} mode="horizontal" theme="dark" selectedKeys={[]} items={items} />;
};

export default observer(HelpMenu);
